import React from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { NavLink, useNavigate } from 'react-router-dom'
import './login/main.css'
import './login/util.css'
import cookie from 'react-cookies'

const Login = () => {
    let navigate = useNavigate()
    const logins = async (value) => {
        let result = await React.$api.login(value)
        cookie.save('LoginUser', result.data)
        if (result.code == '1') {
            Toast.show({
                icon: 'success',
                content: result.msg,
            })
            navigate('/')
        } else {
            Toast.show({
                icon: 'fail',
                content: result.msg,
            })
            return false
        }
    }

    // { checkEmail } 自定义邮箱校验
    // const checkEmail = (rules, value) => {
    //     if (value) {
    //         const reg = new RegExp(
    //             "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
    //         )
    //         if (reg.test(value)) {
    //             return Promise.resolve()
    //         } else {
    //             return Promise.reject(new Error('请输入正确的邮箱'))
    //         }
    //     } else {
    //         return Promise.reject(new Error('邮箱不能为空!'))
    //     }
    // }

    return (
        <>
            <div className="limiter">
                <div className="container-login100" style={{ backgroundImage: `url('/images/img-01.jpg')` }}>
                    <div className="wrap-login100 p-t-110 p-b-30">
                        <Form onFinish={logins} layout='horizontal' className="login100-form validate-form">
                            <div className="login100-form-avatar">
                                <img src="/images/avatar-01.jpg" alt="" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45"></span>

                            <div className="wrap-input100 validate-input m-b-10">
                                <Form.Item
                                    name='email'
                                    label='邮箱'
                                    rules={[{ required: true, message: '邮箱不能为空' }, { type: 'email', warningOnly: true }]}
                                >
                                    <Input placeholder='请输入邮箱' />
                                </Form.Item>
                            </div>

                            <div className="wrap-input100 validate-input m-b-10">
                                <Form.Item
                                    label='密码'
                                    name='password'
                                    rules={[{ required: true, message: '密码不能为空!' }]}
                                >
                                    <Input type='password' placeholder='请输入密码' />
                                </Form.Item>
                            </div>

                            <div className="container-login100-form-btn p-t-20">
                                <Button block type='submit' color='success'>
                                    登 陆
                                </Button>
                            </div>

                            <div className="text-center w-full p-t-20">
                                <NavLink to="/user/base/register" className="txt1">
                                    立即注册
                                </NavLink>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login;